{% extends "pages-base.html" %}
{% block css %}
<script type="text/javascript" src="/static/js/select2.full.js"></script>
<script type="text/javascript" src="/static/js/prettify.min.js"></script>
<link href="/static/css/select2.min.css" type="text/css" rel="stylesheet"/>
<!--<script src="/static/js/bootstrap.min.js"></script>-->

{% endblock %}

{% block content %}
<!--Default Tabs (Left Aligned)-->
<!--===================================================-->
<div class="tab-base">

    <!--Nav Tabs-->
    <ul class="nav nav-tabs" id="deploy-project-tabs">
        <li class="active">
            <a data-toggle="tab" href="#deploy-project-tab-1" class="deploy-project-tab1">添加项目</a>
        </li>
        <li>
            <a data-toggle="tab" href="#deploy-project-tab-1" class="deploy-project-tab2">创建项目</a>
        </li>
    </ul>
    <!--Tabs Content-->
    <div class="tab-content">
        <div id="deploy-project-tab-1" class="tab-pane fade active in">
            <div class="panel">

                <div class="panel-body" id="deploy-project-addproject-btn">
                    <p id="deploy-project-p1" style="color: rgba(124, 130, 134, 0.53);">添加一个已有的项目</p>
                    <p id="deploy-project-p2" style="display: none;color: rgba(124, 130, 134, 0.53);">
                        创建一个新的项目，项目目录会根据项目名称自动生成</p>

                    <button data-target="#deploy-project-modal" data-toggle="modal" class="btn btn-primary btn-lg">
                        添加项目
                    </button>
                </div>
                <!--project list table-->
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>项目目录</th>
                                <th>所属服务器</th>
                                <th>授权用户</th>
                                <th>编辑</th>
                            </tr>
                            </thead>
                            <tbody id="deploy-project-datable">
                            {% for p in allProjects %}
                            <tr proid="{{ p.id }}">
                                <td class="deploy-project-name">{{ p.projectName }}</td>
                                <td class="deploy-project-dir">{{ p.projectDir }}</td>
                                <td prohostid="{{ p.projecthost.id }}" class="deploy-project-host" >{{ p.projecthost.hostName }}/{{ p.projecthost.hostPublicIP }}</td>
                                <!--<td>{{ p.projectowner.all.0 }}</td>-->
                                <!--注意此处对多多对象列表的循环-->
                                <td>
                                    {% for ou in p.projectowner.all %}
                                    {{ ou.userNameHuman }}
                                    <span style="display: none" class="deploy-project-ouid">u{{ ou.uid }}</span>
                                    {% if not forloop.last %},
                                    {% endif %}
                                    {% endfor %}
                                    &nbsp;
                                    {% for og in p.projectgrouper.all %}
                                    {{ og.userGroupName }}组
                                    <span style="display: none" class="deploy-project-guid">g{{ og.gid }}</span>
                                    {% if not forloop.last %}
                                    {% endif %}
                                    {% endfor %}

                                </td>
                                <td class="deploy-project-exec">
                                    <button type="button" class="btn btn-info deploy-project-editpro"
                                            data-toggle="modal"
                                            data-target="#deploy-project-modal">编辑
                                    </button>
                                    <button type="button" class="btn btn-danger deploy-project-delpro">删除</button>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--endproject list table-->
            </div>
        </div>
    </div>
    <!--end tabls content-->
</div>


<!--Default Bootstrap Modal-->
<!--===================================================-->
<div class="modal fade" id="deploy-project-modal" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!--Modal header-->
            <div class="modal-header" id="deploy-project-modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加项目</h4>
            </div>

            <!--Modal body-->
            <div class="modal-body">
                <!-- BASIC FORM ELEMENTS -->
                <!--===================================================-->
                <form class="panel-body form-horizontal form-padding">
                    <!--Text Input-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-project-name">项目名称</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-project-name" class="form-control" placeholder="project name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-project-dir">项目目录</label>
                        <div class="col-md-9">
                            <input type="text" id="deploy-project-dir" class="form-control"
                                   placeholder="/data/workspace/">
                        </div>
                    </div>

                    <!--select host group-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="deploy-project-host">所属服务器</label>
                        <div class="col-md-9">
                            <select data-placeholder="Choose a host..." id="deploy-project-host" class="form-control">
                                {% for h in allhosts %}
                                <option value="{{ h.id }}">{{ h.hostName }}/{{ h.hostPublicIP }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">项目用户授权</label>
                        <div class="col-md-9">
                            <!-- multiple select boxs -->
                            <!--===================================================-->
                            <select class="deploy-project-user-multiple deploy-project-user-states form-control"
                                    multiple="multiple"></select>
                            <!--===================================================-->
                            <p>注:请选择想要授权的用户或用户组</p><br>
                        </div>
                    </div>
                </form>
                <!--===================================================-->
                <!-- END BASIC FORM ELEMENTS -->
            </div>
            <!--Modal footer-->
            <div class="modal-footer" id="deploy-project-savebtn">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary btn-save" saveflg="addpro">保存</button>
                <button class="btn btn-primary btn-edit-save" style="display: none;">保存</button>
            </div>
        </div>
    </div>
</div>
<!--===================================================-->
<!--End Default Bootstrap Modal-->
<!--<select class="js-source-states" style="display: none;">
    <optgroup label="主机">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="主机组">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
    </optgroup>
</select>-->
<select class="deploy-project-user-source" style="display: none;">
    <optgroup label="用户">
        {% for u in allusers %}
        <option value="u{{ u.uid }}">{{ u.userNameHuman }}</option>
        {% endfor %}
    </optgroup>
    <optgroup label="用户组">
        {% for g in allusergroups %}
        <option value="g{{ g.gid }}">{{ g.userGroupName }}</option>
        {% endfor %}
    </optgroup>
</select>
{% endblock %}


{% block js %}
<script type="text/javascript">
    var $states = $(".js-source-states");
    var statesOptions = $states.html();
    $states.remove();
    $(".js-states").append(statesOptions);
    $.fn.select2.amd.require(
            ["select2/core", "select2/utils", "select2/compat/matcher"],
            function () {
                var $basicMultiple = $(".js-example-basic-multiple");
                $basicMultiple.select2()
            });
</script>
<script type="text/javascript">
    var $states = $(".deploy-project-user-source");
    var statesOptions = $states.html();
    $states.remove();
    $(".deploy-project-user-states").append(statesOptions);
    $.fn.select2.amd.require(
            ["select2/core", "select2/utils", "select2/compat/matcher"],
            function () {
                var $basicMultiple = $(".deploy-project-user-multiple");
                $basicMultiple.select2()
            });
</script>
<script src="/static/js/deploy-project.js"></script>
{% endblock %}